<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>后台登录</title>
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" href="{$staticAdmin}css/style.css" />
<style>
body{height:100%;background:#16a085;overflow:hidden;}
canvas{z-index:-1;position:absolute;}
</style>
<script src="{$staticAdmin}js/jquery.js"></script>
<script src="{$staticAdmin}js/verificationNumbers.js"></script>
<script src="{$staticAdmin}js/Particleground.js"></script>

 <!--调用jquery的ajax-->
<!-- <script src="{$staticAdmin}js/jquery-1.11.3.min.js"></script>-->

<script>
$(document).ready(function() {

    //验证码字符串
    var code = null;

  //粒子背景特效
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });
  //验证码
  code = createCode();
  //测试提交，对接程序删除即可
  /*$(".submit_btn").click(function(){
	  location.href="index.html";
	  });*/

});
</script>
</head>
<body>
<dl class="admin_login">
 <dt>
  <strong>商城后台管理系统</strong>
  <em>Shop Management System</em>
 </dt>
 <dd class="user_icon">
       <!--用户名-->
  <input type="text" placeholder="账号" class="login_txtbx" name="username" maxlength="20"/>
 </dd><dd class="dd1"></dd>
 <dd class="pwd_icon">
       <!--密码-->
  <input type="password" placeholder="密码" class="login_txtbx" name="password" maxlength="15"/>
 </dd><dd class="dd1"></dd>
 <dd class="val_icon">
  <div class="checkcode">
       <!--验证码-->
    <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx" name="code">
    <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
  </div>
      <!--自动比对验证码按钮-->
 <!-- <input type="button" value="验证码核验" class="ver_btn" onClick="validate();">-->
  <input type="button" value="看不清,换一张" class="ver_btn" onClick="createCode()">
 </dd><dd class="dd1"></dd>
 <dd>
  <input type="button" value="立即登录" class="submit_btn"/>
 </dd>
 <dd>
  <p>© 2015-2016 DeathGhost 版权所有</p>
  <p>陕B2-20080224-1</p>
 </dd>
</dl>
</body>
</html>
<script>
    //这是自己的登录js
    /*************   自己的代码   *******************************/

    $(function () {

        //标记位
    var fName = false;
    var fPwd  = false;
    var fCode = false;
    var $oName = null; //用户名的值
    var $oPwd = null; //密码的值


        // 用户名的失去焦点事件
    $('[name=username]').blur(function () {

        //获取用户名的值, 动用正则,排除输入空字符符号
        $oName = $('[name=username]').val().replace(/(^\s*)|(\s*$)/g, "");

        /*alert($oName);
        alert($oName.length);*/

        //判断用户名是否为空
        if ($oName.length ==0) {
            $('.dd1').eq(0).html('用户名不得为空').css('color','yellow').css('fontSize','0.32rem');
            fName = false;
            return false;
        }

        //判断用户名长度不超过12,汉字不超过4个,注意js中的一个汉字占用1个字节,php中一个汉字占3个字节
        //利用正则判断汉字
        if($oName.match( /^[\u4E00-\u9FA5]{1,}$/)){
            //alert('这是汉字');
            if ($oName.length  > 4 || $oName.length < 1) {
                $('.dd1').eq(0).html('用户名应为 1~4 个汉字').css('color','yellow').css('fontSize','0.32rem');
                fName = false;
                return false;
            }

        } else {
            //alert('这不是汉字');
            if ($oName.length > 12 || $oName.length < 3) {
                $('.dd1').eq(0).html('用户名应为 3~12 位字符串').css('color','yellow').css('fontSize','0.32rem');
                fName = false;
                return false;
            }
        }
        fName = true;
        $('.dd1').eq(0).html('用户名合法').css('color','green').css('fontSize','0.32rem');
        //console.log(fName);
        //标记位为true才能向后台传输数据
        if (fName) {

            //ajax传输
            $.post('username',{username:$oName},success,'json');
        }

    });


    //密码失去焦点事件
    $('[name=password]').blur(function () {

        //console.log(fName);
        //使每一步逻辑关联
        if (!fName) {

            $('.dd1').eq(1).html('请先完成上一步操作').css('color','yellow').css('fontSize','0.32rem');
            return false;
        }
       //获取密码值
        $oPwd = $('[name=password]').val().replace(/(^\s*)|(\s*$)/g, "");

        //判断用户名是否为空
        if ($oPwd.length ==0) {
            $('.dd1').eq(1).html('密码不得为空').css('color','yellow').css('fontSize','0.32rem');
            fPwd = false;
            return false;
        }

        //判断密码长度
        //利用正则判断汉字
        if($oPwd.match( /^[\u4E00-\u9FA5]{1,}$/)){

            //alert('这是汉字');
            $('.dd1').eq(1).html('密码不得为汉字').css('color','yellow').css('fontSize','0.32rem');
            fPwd = false;
            return false;

        } else {
            //alert('这不是汉字');
            if ($oPwd.length > 12 || $oPwd.length < 3) {
                $('.dd1').eq(1).html('密码应为 3~12 位非汉字符串').css('color','yellow').css('fontSize','0.32rem');
                fPwd = false;
                return false;
            }
        }

        fPwd = true;
        //console.log(fPwd);
        if (fPwd) {

            $.post('password',{username:$oName,password:$oPwd},success,'json');

        }
    });

    //验证码失去焦点事件
          $('[name=code]').blur(function () {

              //使每一步逻辑关联
              if (!fPwd) {
                  $('.dd1').eq(2).html('请先完成上一步操作').css('color', 'yellow').css('fontSize', '0.32rem');
                  return false;
              }

              //获取验证码值
              var $oCode = $('[name=code]').val().replace(/(^\s*)|(\s*$)/g, "");

              //判断验证码的值是否为空
              if ($oCode.length == 0) {
                  $('.dd1').eq(2).html('验证码不得为空').css('color', 'yellow').css('fontSize', '0.32rem');
                  fCode = false;
                  return false;
              }

              //比对验证码
              if (!compere()) {

                  $('.dd1').eq(2).html('验证码错误').css('color', 'yellow').css('fontSize', '0.32rem');
                  fCode = false;
                  return false;
              }

              fCode = true;
              $('.dd1').eq(2).html('验证码正确').css('color', 'green').css('fontSize', '0.32rem');

              //封装一个不区分大小写的函数
              function compere()
              {
                   //小写
                  if ($oCode.toLowerCase() == code.toLowerCase()) {

                      return true;

                      //大写
                  } else if ($oCode.toUpperCase() == code.toUpperCase()) {

                      return true;
                  } else {

                      return false;
                  }
              }

          });


          //点击按钮,跳转页面
         $(".submit_btn").click(function(){

             if (fName && fPwd && fCode) {

                 //跳转页面
                 //alert('登录成功');
                 //ajax
                 $.post('doLogin',{username:$oName},success,'json');

             } else {
                 alert('登录失败,请先按要求完成操作');
             }

         });



    //处理后台数据的回调函数
    function success(data) {

        console.log(data);

        switch (data.status) {
            //用户名
            //管理员
            case 1:
                $('.dd1').eq(0).html(data.tip).css('color','yellow').css('fontSize','0.32rem');  //管理员/商家被伪删除
                fName = false;
                break;
            case 2:
                $('.dd1').eq(0).html(data.tip).css('color','green').css('fontSize','0.32rem');  //商家/管理员用户名存在,合法
                fName = true;
                break;

            //商家
            case 3:
                $('.dd1').eq(0).html(data.tip).css('color','yellow').css('fontSize','0.32rem');  //商家未激活,
                fName = false;
                break;
            case 4:
                $('.dd1').eq(0).html(data.tip).css('color','yellow').css('fontSize','0.32rem');  //该商家已暂停营业
                fName = false;
                break;
            case 5:
                $('.dd1').eq(0).html(data.tip).css('color','yellow').css('fontSize','0.32rem');  //商家未通过审核
                fName = false;
                break;
            case 6:
                $('.dd1').eq(0).html(data.tip).css('color','yellow').css('fontSize','0.32rem');  //该商家不存在(为删除)
                fName = false;
                break;
            case 7:
                $('.dd1').eq(0).html(data.tip).css('color','yellow').css('fontSize','0.32rem');  //商家尚未注册,不合法
                fName = false;
                break;

            //密码
            case 8:
                $('.dd1').eq(1).html(data.tip).css('color','yellow').css('fontSize','0.32rem');  //密码错误
                fPwd = false;
                break;

            case 9:
                $('.dd1').eq(1).html(data.tip).css('color','green').css('fontSize','0.32rem');  //密码正确
                fPwd = true;
                break;

            //登录失败
            case 10:
                alert(data.tip);  //登录失败
                fName = false;
                fPwd = false;
                break;

            case 11:
                location.href="{$webSite}admin/goods/index";  //登录失败
                break;

        }

    }

     });





</script>
